<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的 - TodoList</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="miniprogram-container">
        <div class="page">
            <!-- 头部区域 -->
            <header class="header">
                <div class="flex flex-between">
                    <div>
                        <h1 class="header-title">⚡ 控制中心</h1>
                        <p class="header-subtitle">CONTROL CENTER</p>
                    </div>
                    <div class="flex" style="gap: 8px;">
                        <button class="btn btn-secondary" onclick="openSettings()">
                            <i class="fas fa-cog"></i>
                        </button>
                        <button class="btn btn-secondary" onclick="openNotifications()">
                            <i class="fas fa-bell"></i>
                        </button>
                    </div>
                </div>
            </header>

            <!-- 用户信息卡片 -->
            <div class="card card-glow-blue animate-slide-up" style="margin: 16px; text-align: center;">
                <div style="width: 80px; height: 80px; background: linear-gradient(45deg, var(--accent-blue), var(--accent-cyan)); border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: white; box-shadow: 0 0 30px var(--accent-blue-glow);">
                    <i class="fas fa-user"></i>
                </div>
                <h3 style="margin: 0 0 8px 0; font-size: 18px; font-weight: 600;">TASK MASTER</h3>
                <p style="margin: 0; font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;">高效任务管理者</p>
                <div class="flex flex-center" style="gap: 16px; margin-top: 16px; font-size: 12px;">
                    <div>
                        <div style="font-weight: bold; color: var(--accent-green);">18</div>
                        <div style="color: var(--text-secondary);">已完成</div>
                    </div>
                    <div>
                        <div style="font-weight: bold; color: var(--accent-orange);">6</div>
                        <div style="color: var(--text-secondary);">进行中</div>
                    </div>
                    <div>
                        <div style="font-weight: bold; color: var(--accent-blue);">75%</div>
                        <div style="color: var(--text-secondary);">完成率</div>
                    </div>
                </div>
            </div>

            <!-- 任务统计 -->
            <div class="card animate-slide-up" style="animation-delay: 0.1s;">
                <h4 style="margin: 0 0 16px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">📊 TASK METRICS</h4>
                <div class="stats-grid" style="margin: 0;">
                    <div class="stat-card stat-blue">
                        <div class="stat-number">24</div>
                        <div class="stat-label">TOTAL</div>
                    </div>
                    <div class="stat-card stat-green">
                        <div class="stat-number">18</div>
                        <div class="stat-label">DONE</div>
                    </div>
                    <div class="stat-card stat-orange">
                        <div class="stat-number">6</div>
                        <div class="stat-label">PENDING</div>
                    </div>
                </div>
                
                <!-- 进度条 -->
                <div style="margin-top: 16px;">
                    <div class="flex flex-between" style="margin-bottom: 8px; font-size: 12px;">
                        <span style="color: var(--text-secondary);">整体进度</span>
                        <span style="color: var(--accent-green); font-weight: bold;">75%</span>
                    </div>
                    <div style="width: 100%; height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden;">
                        <div style="width: 75%; height: 100%; background: linear-gradient(90deg, var(--accent-green), #32d74b); box-shadow: 0 0 15px var(--accent-green-glow);"></div>
                    </div>
                </div>
            </div>

            <!-- 快捷功能 -->
            <div class="card animate-slide-up" style="animation-delay: 0.2s;">
                <h4 style="margin: 0 0 16px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">⚡ QUICK ACCESS</h4>
                
                <div class="menu-item" onclick="openAnalytics()">
                    <div class="menu-icon" style="color: var(--accent-blue); filter: drop-shadow(0 0 10px var(--accent-blue-glow));">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <div class="menu-text">数据分析</div>
                    <div class="menu-arrow" style="color: var(--accent-blue);">
                        <i class="fas fa-arrow-right"></i>
                    </div>
                </div>
                
                <div class="menu-item" onclick="openCompleted()">
                    <div class="menu-icon" style="color: var(--accent-green); filter: drop-shadow(0 0 10px var(--accent-green-glow));">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="menu-text">已完成任务</div>
                    <div class="menu-arrow" style="color: var(--accent-green);">
                        <i class="fas fa-arrow-right"></i>
                    </div>
                </div>
                
                <div class="menu-item" onclick="openHistory()">
                    <div class="menu-icon" style="color: var(--accent-orange); filter: drop-shadow(0 0 10px var(--accent-orange-glow));">
                        <i class="fas fa-history"></i>
                    </div>
                    <div class="menu-text">历史记录</div>
                    <div class="menu-arrow" style="color: var(--accent-orange);">
                        <i class="fas fa-arrow-right"></i>
                    </div>
                </div>
                
                <div class="menu-item" onclick="openCalendar()">
                    <div class="menu-icon" style="color: var(--accent-cyan); filter: drop-shadow(0 0 10px var(--accent-cyan-glow));">
                        <i class="fas fa-calendar"></i>
                    </div>
                    <div class="menu-text">日历视图</div>
                    <div class="menu-arrow" style="color: var(--accent-cyan);">
                        <i class="fas fa-arrow-right"></i>
                    </div>
                </div>
            </div>

            <!-- 系统功能 -->
            <div class="card animate-slide-up" style="animation-delay: 0.3s;">
                <h4 style="margin: 0 0 16px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">🛠️ SYSTEM</h4>
                
                <div class="menu-item" onclick="openDataManagement()">
                    <div class="menu-icon" style="color: var(--accent-red); filter: drop-shadow(0 0 10px var(--accent-red-glow));">
                        <i class="fas fa-database"></i>
                    </div>
                    <div class="menu-text">数据管理</div>
                    <div class="menu-arrow" style="color: var(--accent-red);">
                        <i class="fas fa-arrow-right"></i>
                    </div>
                </div>
                
                <div class="menu-item" onclick="openBackup()">
                    <div class="menu-icon" style="color: var(--accent-orange); filter: drop-shadow(0 0 10px var(--accent-orange-glow));">
                        <i class="fas fa-cloud-upload-alt"></i>
                    </div>
                    <div class="menu-text">备份恢复</div>
                    <div class="menu-arrow" style="color: var(--accent-orange);">
                        <i class="fas fa-arrow-right"></i>
                    </div>
                </div>
                
                <div class="menu-item" onclick="openTheme()">
                    <div class="menu-icon" style="color: var(--accent-cyan); filter: drop-shadow(0 0 10px var(--accent-cyan-glow));">
                        <i class="fas fa-palette"></i>
                    </div>
                    <div class="menu-text">主题设置</div>
                    <div class="menu-arrow" style="color: var(--accent-cyan);">
                        <i class="fas fa-arrow-right"></i>
                    </div>
                </div>
                
                <div class="menu-item" onclick="openErrorLogs()">
                    <div class="menu-icon" style="color: var(--accent-red); filter: drop-shadow(0 0 10px var(--accent-red-glow));">
                        <i class="fas fa-bug"></i>
                    </div>
                    <div class="menu-text">错误日志</div>
                    <div class="menu-arrow" style="color: var(--accent-red);">
                        <i class="fas fa-arrow-right"></i>
                    </div>
                </div>
            </div>

            <!-- 应用信息 -->
            <div class="card animate-slide-up" style="animation-delay: 0.4s;">
                <h4 style="margin: 0 0 16px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">ℹ️ APP INFO</h4>
                
                <div class="flex flex-between" style="margin-bottom: 12px; font-size: 14px;">
                    <span style="color: var(--text-secondary);">版本号</span>
                    <span style="color: var(--accent-blue); font-weight: 600;">v2.1.0</span>
                </div>
                
                <div class="flex flex-between" style="margin-bottom: 12px; font-size: 14px;">
                    <span style="color: var(--text-secondary);">存储使用</span>
                    <span style="color: var(--accent-green); font-weight: 600;">2.3MB / 50MB</span>
                </div>
                
                <div class="flex flex-between" style="margin-bottom: 16px; font-size: 14px;">
                    <span style="color: var(--text-secondary);">最后同步</span>
                    <span style="color: var(--accent-orange); font-weight: 600;">刚刚</span>
                </div>
                
                <div class="flex" style="gap: 8px;">
                    <button class="btn btn-secondary" onclick="checkUpdate()" style="flex: 1; font-size: 12px;">
                        <i class="fas fa-sync" style="margin-right: 6px;"></i>检查更新
                    </button>
                    <button class="btn btn-secondary" onclick="showAbout()" style="flex: 1; font-size: 12px;">
                        <i class="fas fa-info-circle" style="margin-right: 6px;"></i>关于应用
                    </button>
                </div>
            </div>

            <!-- 底部空间 -->
            <div style="height: 100px;"></div>

            <!-- 底部导航 -->
            <nav class="bottom-nav">
                <a href="#" class="nav-item">
                    <div class="nav-icon"><i class="fas fa-home"></i></div>
                    <div class="nav-label">主页</div>
                </a>
                <a href="#" class="nav-item active">
                    <div class="nav-icon"><i class="fas fa-user"></i></div>
                    <div class="nav-label">我的</div>
                </a>
            </nav>
        </div>
    </div>

    <script>
        // 设置功能
        function openSettings() {
            console.log('打开设置');
            showToast('设置功能开发中...', 'info');
        }

        // 通知功能
        function openNotifications() {
            console.log('打开通知');
            showToast('通知功能开发中...', 'info');
        }

        // 数据分析
        function openAnalytics() {
            console.log('打开数据分析');
            showToast('跳转到数据分析页面', 'success');
            // 这里可以跳转到分析页面
        }

        // 已完成任务
        function openCompleted() {
            console.log('打开已完成任务');
            showToast('跳转到已完成任务页面', 'success');
            // 这里可以跳转到已完成页面
        }

        // 历史记录
        function openHistory() {
            console.log('打开历史记录');
            showToast('跳转到历史记录页面', 'success');
            // 这里可以跳转到历史页面
        }

        // 日历视图
        function openCalendar() {
            console.log('打开日历视图');
            showToast('日历视图功能开发中...', 'info');
        }

        // 数据管理
        function openDataManagement() {
            console.log('打开数据管理');
            
            // 创建数据管理弹窗
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.8);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 10000;
            `;
            
            modal.innerHTML = `
                <div style="background: var(--bg-secondary); border: var(--border-primary); border-radius: var(--radius-lg); padding: 24px; margin: 20px; max-width: 300px; width: 100%;">
                    <h3 style="margin: 0 0 16px 0; text-align: center; color: var(--text-primary);">🗂️ 数据管理</h3>
                    <div style="margin-bottom: 16px;">
                        <button class="btn btn-primary" onclick="exportData()" style="width: 100%; margin-bottom: 8px;">
                            <i class="fas fa-download" style="margin-right: 8px;"></i>导出数据
                        </button>
                        <button class="btn btn-secondary" onclick="importData()" style="width: 100%; margin-bottom: 8px;">
                            <i class="fas fa-upload" style="margin-right: 8px;"></i>导入数据
                        </button>
                        <button class="btn btn-danger" onclick="clearData()" style="width: 100%;">
                            <i class="fas fa-trash" style="margin-right: 8px;"></i>清空数据
                        </button>
                    </div>
                    <button class="btn btn-secondary" onclick="closeModal()" style="width: 100%;">关闭</button>
                </div>
            `;
            
            modal.onclick = function(e) {
                if (e.target === modal) {
                    closeModal();
                }
            };
            
            window.closeModal = function() {
                modal.remove();
            };
            
            document.body.appendChild(modal);
        }

        // 备份恢复
        function openBackup() {
            console.log('打开备份恢复');
            showToast('备份功能开发中...', 'info');
        }

        // 主题设置
        function openTheme() {
            console.log('打开主题设置');
            showToast('主题设置功能开发中...', 'info');
        }

        // 错误日志
        function openErrorLogs() {
            console.log('打开错误日志');
            showToast('跳转到错误日志页面', 'success');
            // 这里可以跳转到错误日志页面
        }

        // 检查更新
        function checkUpdate() {
            showToast('正在检查更新...', 'info');
            
            setTimeout(() => {
                showToast('当前已是最新版本', 'success');
            }, 1500);
        }

        // 关于应用
        function showAbout() {
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.8);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 10000;
            `;
            
            modal.innerHTML = `
                <div style="background: var(--bg-secondary); border: var(--border-primary); border-radius: var(--radius-lg); padding: 24px; margin: 20px; max-width: 320px; width: 100%; text-align: center;">
                    <div style="width: 60px; height: 60px; background: linear-gradient(45deg, var(--accent-blue), var(--accent-cyan)); border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; box-shadow: 0 0 30px var(--accent-blue-glow);">
                        ⚡
                    </div>
                    <h3 style="margin: 0 0 8px 0; color: var(--text-primary);">TodoList Pro</h3>
                    <p style="margin: 0 0 16px 0; color: var(--text-secondary); font-size: 14px;">深色主题任务管理应用</p>
                    <div style="text-align: left; font-size: 12px; color: var(--text-secondary); margin-bottom: 16px;">
                        <p style="margin: 4px 0;">版本：v2.1.0</p>
                        <p style="margin: 4px 0;">开发者：Task Master Team</p>
                        <p style="margin: 4px 0;">更新时间：2024-01-15</p>
                    </div>
                    <button class="btn btn-primary" onclick="closeModal()" style="width: 100%;">确定</button>
                </div>
            `;
            
            modal.onclick = function(e) {
                if (e.target === modal) {
                    closeModal();
                }
            };
            
            window.closeModal = function() {
                modal.remove();
            };
            
            document.body.appendChild(modal);
        }

        // 数据操作函数
        function exportData() {
            showToast('数据导出成功！', 'success');
            closeModal();
        }

        function importData() {
            showToast('请选择要导入的文件', 'info');
            closeModal();
        }

        function clearData() {
            if (confirm('确定要清空所有数据吗？此操作不可恢复！')) {
                showToast('数据已清空', 'danger');
                closeModal();
            }
        }

        // 显示提示消息
        function showToast(message, type = 'success') {
            const colors = {
                success: { bg: 'var(--accent-green)', glow: 'var(--accent-green-glow)' },
                danger: { bg: 'var(--accent-red)', glow: 'var(--accent-red-glow)' },
                info: { bg: 'var(--accent-blue)', glow: 'var(--accent-blue-glow)' }
            };
            
            const color = colors[type] || colors.success;
            
            const toast = document.createElement('div');
            toast.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: ${color.bg};
                color: white;
                padding: 12px 24px;
                border-radius: var(--radius-md);
                font-size: 14px;
                font-weight: 600;
                z-index: 10000;
                box-shadow: 0 0 30px ${color.glow};
                animation: fadeIn 0.3s ease;
            `;
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.style.animation = 'fadeOut 0.3s ease';
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 2000);
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 添加菜单项点击效果
            const menuItems = document.querySelectorAll('.menu-item');
            menuItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 添加点击反馈
                    this.style.transform = 'translateX(8px)';
                    setTimeout(() => {
                        this.style.transform = 'translateX(4px)';
                    }, 150);
                });
            });

            // 添加统计卡片动画
            const statCards = document.querySelectorAll('.stat-card');
            statCards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.transform = 'scale(1.05)';
                    setTimeout(() => {
                        card.style.transform = 'scale(1)';
                    }, 200);
                }, index * 100);
            });
        });

        // 添加 fadeOut 动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html> 